<template>

  <el-container>
    <el-header>
      <el-row type="flex" justify="space-between">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="title align_middle">鲶鱼租物后台管理系统</div>
        </el-col>
        <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">

          <div class="title align_middle">{{ this.$store.state.adminName }}</div>

        </el-col>
      </el-row>

    </el-header>
    <el-container>
      <el-main>

        <el-row>
          <el-col>
            <el-menu :default-openeds="['1', '4']" default-active="this.$route.path" router mode="horizontal"
              style="background-color: rgb(238, 241, 246)">
              <el-menu-item index="/index">系统首页</el-menu-item>
              <el-menu-item index="/products">商品管理</el-menu-item>
              <el-menu-item index="/user">用户管理</el-menu-item>
              <el-menu-item index="/order">订单管理</el-menu-item>
              <el-menu-item @click="logout"> 退出登录 </el-menu-item>
              <el-menu-item>
                <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" :disabled="inputistrue">

                  <el-button slot="append" icon="el-icon-search" @click="search" :disabled="buttonistrue">搜索</el-button>
                </el-input>
              </el-menu-item>
            </el-menu>

          </el-col>

        </el-row>

        <router-view />


      </el-main>

    </el-container>
  </el-container>
</template>

<style scoped>
.el-row {
  margin: 0;
  /* align-self: middle; */
}

.el-col>div {
  height: inherit;
  margin-top: 12px;
}


.align_middle {

  text-align: left;

}

.title {

  font: 400 1.5rem 'Montserrat';
  background: linear-gradient(to right, #06599b 10%, #01ef96 50%, #06599b 90%);
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: animate 2s linear infinite;
}

@keyframes animate {
  to {
    background-position: 200% center;
  }
}


.el-header {

  background-color: #B3C0D1;
  color: #333;


}
</style>

<script>

export default {

  created() {

  },
  data() {

    return {

      
      input3: '',
      show: true,
      inputistrue: false,
      buttonistrue: false,
    }

  },
  methods: {
    search() {
      this.$store.commit('searchOrder', this.input3);
    },
    logout() {
      this.axios({
        method: "POST",
        url: "https://admin.xiaoheihe.work/bapi/logout"
      })
        .then(response => {
          this.$store.commit('adminLogin','');
          console.log(response)
          this.$store.dispatch("userLogin", false);
          localStorage.removeItem("Flag", "isLogin");
          this.$router.push("/login")
        })

     
    },
  },
  watch: {
    '$route'(to, from) {
      if (from.path === '/' || from.path === '/index' || from.path === '/user' || from.path === '/order' || from.path === '/products') {
        if (to.path === '/index') {
          this.inputistrue = true
          this.buttonistrue = true
        } else {
          this.inputistrue = false
          this.buttonistrue = false
        }
      }
    }
  }
};
</script>

